import { DeleteOutlined } from "@ant-design/icons";
import { Button, Card, Col, Form, Input, Row } from "antd";
import { useEffect, useState } from "react";

interface Props {
    appId: number;
    onSubmit: (data: API.ScoringResultAddRequest[]) => void;
}

const CreateScoringResultComponent: React.FC<Props> = (props) => {

    const [scoreResult, setScoreResult] = useState<API.ScoringResultAddRequest[]>([]);

    const { appId  , onSubmit} = props;
    const handleScoreResultChange = (index: number, field: string, value: any) => {
        setScoreResult((prev) => {
            const newOptions = [...prev];

            if (field in newOptions[index]) {
                if (field === 'resultProp') {
                    newOptions[index].resultProp = Array.from(value)
                }
                else {
                    (newOptions[index] as any)[field] = value;
                }
            }
            return newOptions;
        });
    }

    const handleAddScoringResult = () => {
        setScoreResult((prev) => [...prev, {
            appId:appId,
            resultName: '',
            resultDesc: '',
            resultPicture: '',
            resultScoreRange: 0,
            resultProp: [],
        }])
    }

    const handleDeleteScoringResult = (index: number) => {
        setScoreResult((prev) => prev.filter((item, i) => i !== index));
    }

    const handleSubmit = () => {
        onSubmit(scoreResult);
    }

    useEffect(()=>{
        handleAddScoringResult()
    } , [])

    return (
        <>
            <Card style={{ height: '400px', overflowY: 'scroll' }}>
                {scoreResult?.map((item, index) => (
                    <Card key={index} style={{ marginBottom: 12 }} title={`结果${index + 1}`} extra={<Button icon={<DeleteOutlined />} onClick={() => handleDeleteScoringResult(index)}></Button>}>

                        <Form>
                            <Row>
                                <Col span={12}>
                                    <Form.Item
                                        label={`resultName`}
                                        style={{ padding: 8 }}
                                    >
                                        <Input value={item.resultName}
                                            onChange={(e) => handleScoreResultChange(index, 'resultName', e.target.value)}
                                        />
                                    </Form.Item>
                                </Col>
                                <Col span={12}>
                                    <Form.Item
                                        label={`resultDesc`}
                                        style={{ padding: 8 }}
                                    >
                                        <Input value={item.resultDesc}
                                            onChange={(e) => handleScoreResultChange(index, 'resultDesc', e.target.value)}
                                        />
                                    </Form.Item>
                                </Col>
                                <Col span={12}>
                                    <Form.Item
                                        label={`resultPicture`}
                                        style={{ padding: 8 }}
                                    >
                                        <Input value={item.resultPicture}
                                            onChange={(e) => handleScoreResultChange(index, 'resultPicture', e.target.value)}
                                        />
                                    </Form.Item>
                                </Col>
                                <Col span={12}>
                                    <Form.Item
                                        label={`resultScoreRange`}
                                        style={{ padding: 8 }}
                                    >
                                        <Input value={item.resultScoreRange}
                                            onChange={(e) => handleScoreResultChange(index, 'resultScoreRange', e.target.value)}
                                        />
                                    </Form.Item>
                                </Col>
                                <Col span={12}>
                                    <Form.Item
                                        label={`resultProp`}
                                        style={{ padding: 8 }}
                                    >
                                        <Input value={item.resultProp}
                                            onChange={(e) => handleScoreResultChange(index, 'resultProp', e.target.value)}
                                        />
                                    </Form.Item>
                                </Col>
                            </Row>
                        </Form>
                    </Card>
                ))}


            </Card>
            <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 20, gap: 10 }}>
                <Button type="dashed" onClick={handleAddScoringResult}>
                    添加评分结果
                </Button>
                <Button type="primary" onClick={handleSubmit}>
                    添加完成
                </Button>
            </div>
        </>

    )
}
export default CreateScoringResultComponent;
